<!-- 基本资料 -->
<template>
  <div>
    <devArticle>
    	<div style="background: #f8f8f9">
      <Tabs value="name1">
        <!-- 机构信息 -->
        <TabPane label="机构信息" name="name1">
          <Card>
            <!-- 头部按钮 -->
            <Row>
              <Col span="24">
              <Button type="primary" style="float: right;">修改机构信息</Button>
              </Col>
            </Row>
            <div class="area">
              <p class="fon">机构证件扫描件</p>
              <Row type="flex" justify="space-between">
                <!-- 左侧 -->
                <Col span="11">
                <span class="dis"></span>
                <p style="margin: 15px 0">
                  <span style="display: inline-block;width: 20%">机构名称</span>
                  <Input placeholder="某机构" style="width: 60%; margin-left:2%" />
                </p>
                <p style="margin: 15px 0">
                  <span style="display: inline-block;width: 20%">法定代表人</span>
                  <Input placeholder="张三" style="width: 60%; margin-left:2%" />
                </p>
                <p style="margin: 15px 0">
                  <span style="display: inline-block;width: 20%">联系人</span>
                  <Input placeholder="张四" style="width: 60%; margin-left:2%" />
                </p>
                <p style="margin: 15px 0">
                  <span style="display: inline-block;width: 20%">联系电话</span>
                  <Input placeholder="12345678901" style="width: 60%; margin-left:2%" />
                </p>
                </Col>
                <!-- 右侧 -->
                <Col span="11">
                <span class="dis"></span>
                <p style="margin: 15px 0">
                  <span style="display: inline-block;width: 24%">统一社会信用代码</span>
                  <Input placeholder="1111111111" style="width: 60%; margin-left:2%" />
                </p>
                <p style="margin: 15px 0">
                  <span style="display: inline-block;width: 24%">地址</span>
                  <Input placeholder="新乡市红旗区商户大厦" style="width: 60%; margin-left:2%" />
                </p>
                <p style="margin: 15px 0">
                  <span style="display: inline-block;width: 24%">机构资质</span>
                  <Input placeholder="环境影响报告书甲级类别：轻工纺织" style="width: 60%; margin-left:2%" />
                </p>
                </Col>
              </Row>
            </div>
          </Card>
        </TabPane>
        <!-- 个人信息 -->
        <TabPane label="个人信息" name="name2">
          <Card>
            <!-- 头部按钮 -->
            <Row>
              <Col span="24">
              <Button type="primary" style="float: right;">修改个人信息</Button>
              </Col>
            </Row>
            <div class="area">
              <Row type="flex" justify="space-between">
                <!-- 左侧 -->
                <Col span="10">
                <p style="margin: 15px 0">
                  <span style="display: inline-block;width: 20%">姓名</span>
                  <Input placeholder="张三" style="width: 60%; margin-left:2%" />
                </p>
                <p>
                  <span style="display: inline-block;width: 20%">性别</span>
                  <RadioGroup v-model="sex">
                    <Radio label="man">
                      <span>男</span>
                    </Radio>
                    <Radio label="women">
                      <span>女</span>
                    </Radio>
                  </RadioGroup>
                </p>
                <p style="margin: 15px 0">
                  <span style="display: inline-block;width: 20%">职位</span>
                  <Input placeholder="工程师" style="width: 60%; margin-left:2%" />
                </p>
                <p style="margin: 15px 0">
                  <span style="display: inline-block;width: 20%">所属部门</span>
                  <Input placeholder="某部门" style="width: 60%; margin-left:2%" />
                </p>
                <p style="margin: 15px 0">
                  <span style="display: inline-block;width: 20%">手机号</span>
                  <Input placeholder="12345678901" style="width: 60%; margin-left:2%" />
                </p>
                </Col>
                <!-- 右侧 -->
                <Col span="10">
                <p style="margin: 15px 0">
                  <span style="display: inline-block;width: 20%">头像</span>
                  <img src="">
                </p>
                  <p style="margin: 15px 0">
                    <span style="display: inline-block;width: 20%">生日</span>
                    <Input placeholder="某部门" style="width: 60%; margin-left:2%" />
                  </p>
                  <p style="margin: 15px 0">
                    <span style="display: inline-block;width: 20%">邮箱</span>
                    <Input placeholder="12345678901" style="width: 60%; margin-left:2%" />
                  </p>
                  <p style="margin: 15px 0">
                    <span style="display: inline-block;width: 20%">qq</span>
                    <Input placeholder="12345678901" style="width: 60%; margin-left:2%" />
                  </p>
                  <p style="margin: 15px 0">
                    <span style="display: inline-block;width: 20%">微信</span>
                    <Input placeholder="12345678901" style="width: 60%; margin-left:2%" />
                  </p>
                  </Col>
              </Row>
            </div>
          </Card>
        </TabPane>
        <!-- 人员管理 -->
        <TabPane label="人员管理" name="name3">
          <Card>
            <!-- 头部按钮 -->
            <Row type="flex" justify="start">
              <Col span="2">
              <Input placeholder="姓名" style="width: 70%; margin-left:2%" />
              </Col>
              <Col span="2">
              <Input placeholder="部门" style="width: 70%; margin-left:2%" />
              </Col>
              <Col span="2">
              <Input placeholder="职位" style="width: 70%; margin-left:2%" />
              </Col>
              <Col span="2">
              <Button type="primary" size="large">查找</Button>
              </Col>
              <Col span="2">
              <Button type="primary" size="large">清除</Button>
              </Col>
            </Row>
            <!-- 上部表格 -->
            <Table border :columns="columns1" :data="data1" style="margin-top: 10px"></Table>
          </Card>
          <!-- 下部表格 -->
          <Row type="flex" justify="space-between" style="margin-top: 10px">
            <!-- 左侧卡片 -->
            <Col span="11">
            <Card>
              <!-- 头部 -->
              <Row>
                <Col span="12">
                <h3>创建部门</h3>
                </Col>
                <Col span="12">
                <Button type="primary" style="float: right;">添加</Button>
                </Col>
              </Row>
              <!-- 左侧表格 -->
              <Table border :columns="columns2" :data="data2" style="margin-top: 10px"></Table>
            </Card>
            </Col>
            <!-- 右侧卡片 -->
            <Col span="11">
            <Card>
            	<!-- 头部 -->
              <Row>
                <Col span="12">
                <h3>创建职位</h3>
                </Col>
                <Col span="12">
                <Button type="primary" style="float: right;">添加</Button>
                </Col>
              </Row>
              <!-- 右侧表格 -->
              <Table border :columns="columns3" :data="data3" style="margin-top: 10px"></Table>
            </Card>
            </Col>
          </Row>
        </TabPane>
      </Tabs>
      </div>     
    </devArticle>
  </div>
</template>
<script>
export default {
  data() {
    return {
      sex: 'man',
      columns1: [{
          title: '职位名称',
          key: 'name1',
          align: 'center'
        },
        {
          title: '姓名',
          key: 'name2',
          align: 'center'
        },
        {
          title: '性别',
          key: 'sex',
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h('Select', {}, ),
            ]);
          }
        },
        {
          title: '公司级别',
          key: 'level',
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h('Select', {}, ),
            ]);
          }
        },
        {
          title: '所属部门',
          key: 'depart',
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h('Select', {}, ),
            ]);
          }
        },
        {
          title: '账号密码',
          key: 'num',
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h('Select', {}, ),

            ]);
          }
        },
        {
          title: '操作',
          key: 'opera',
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },

              }, '添加'),
              h('Button', {
                props: {
                  type: 'error',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
              }, '删除'),
              h('Button', {
                props: {
                  type: 'warning',
                  size: 'small'
                },
              }, '重置密码')
            ]);
          }
        }
      ],
      data1: [{
          name1: '总工',
          name2: '张三',
        },
        {
          name1: '总工',
          name2: '张三',
        },
        {
          name1: '总工',
          name2: '张三',
        },
        {
          name1: '总工',
          name2: '张三',
        },
        {
          name1: '总工',
          name2: '张三',
        },
        {
          name1: '总工',
          name2: '张三',
        }
      ],
      columns2: [{
      	title: '部门名称',
      	key: 'name3',
      	align: 'center'
      },
      {
      	title: '职位权限',
      	align: 'center',
      	render: (h, params) => {
            return h('div', [
              h('Select', {}, ),

            ]);
          }
      },
      {
      	title: '操作',
      	key: 'opera1',
      	align: 'center',
      	render: (h, params) => {
            return h('div', [
              h('Button', {
              	props: {
                  type: 'error',
                  size: 'small'
                }
              }, '删除'),
            ]);
          }
      }
      ],
      data2: [{
      	name3: '技术部'
      },
      {
      	name3: '技术部'
      },
      {
      	name3: '技术部'
      },
      {
      	name3: '技术部'
      },
      {
      	name3: '技术部'
      }
      ],
    columns3: [{
      	title: '职位名称',
      	key: 'name3',
      	align: 'center'
      },
      {
      	title: '职位权限',
      	align: 'center',
      	render: (h, params) => {
            return h('div', [
              h('Select', {}, ),

            ]);
          }
      },
      {
      	title: '操作',
      	key: 'opera1',
      	align: 'center',
      	render: (h, params) => {
            return h('div', [
              h('Button', {
              	props: {
                  type: 'error',
                  size: 'small'
                }
              }, '删除'),
            ]);
          }
      }
      ],
      data3: [{
      	name3: '技术部'
      },
      {
      	name3: '技术部'
      },
      {
      	name3: '技术部'
      },
      {
      	name3: '技术部'
      },
      {
      	name3: '技术部'
      }
      ]
    }
  }
}

</script>
<style lang="less">
.area {
  width: 100%;
  height: 100%;
  background: #f3f3f4;
  padding: 2% 3%;
  margin-top: 10px
}

.dis {
  display: inline-block;
  width: 100%;
  height: 300px;
  background: #c1c1c1;
}

.fon {
  font-weight: bold;
  margin-bottom: 1%;
}

</style>
